<template>
  <div>
    <ex-dialog width="60%" class="ex-diolog" title="修改结算账户" :visible="visible" @closeDialog="handleClose"
      :close-on-click-modal="false">
      <template>
        <el-form :model="formInfo" :rules="rules" ref="ruleForm" v-loading="loading">
          <div class="list" v-if="payStatus == 1">
            <el-form-item label="选择日常消费支付账户:" prop="">
              <el-select v-model="formInfo.everydayFundId" filterable style="width: 350px">
                <el-option v-for="item in everydayls" :key="item.id" :label="item.value" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="list">
            <el-form-item label="费率：" prop="">
              <el-input v-model="formInfo.everydayFee" placeholder="请输入费率">
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </div>
          <div class="list" v-if="payStatus==1">
            <el-form-item label="选择存管账户：">
              <el-select v-model="formInfo.depositFundId" filterable placeholder="选择存管账户" style="width: 350px">
                <el-option v-for="item in DepositoryLs" :key="item.id" :label="item.value" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="list">
            <el-form-item label="费率：">
              <el-input v-model="formInfo.depositFee" placeholder="请输入费率">
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </div>
        </el-form>
        <div class="tltle">
          <div class="lable">温馨提示：</div>
          <div class="con">
            此操作立即生效，未避免商家账单问题，请确认该商户当日无产生支付订单后再进行修改
          </div>
        </div>
        <div class="btn_box">
          <el-button type="danger" @click="handleClose">取消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
          <!-- <el-button
            type="primary"
            @click="submitYs('ruleForm')"
            v-if="payStatus == 2"
            >确定</el-button
          > -->
        </div>
      </template>
    </ex-dialog>
  </div>
</template>
<script>
  // components
  import Loading from "@/components/Loading/index";

  // api
  import {
    getPayFundAccount,
    fundAccountSelect,
    payFundAccount,
    payFundFee,
  } from "@/api/moneyManagement";

  export default {
    components: {
      Loading,
    },
    props: {
      visible: Boolean,
      id: String,
      payStatus: String,
    },
    data() {
      return {
        fundlist: [], //下拉列表
        DepositoryLs: [], //存管消费下拉列表
        everydayls: [], //日常消费下拉列表
        payLs: [], //支付方式
        formInfo: {
          //提交的参数
          merchantId: "", //商家id
          everydayFundId: "", //日常收款支付帐号id
          everydayFee: "", //日常收款费率
          depositFundId: "", //存管支付帐号id
          depositFee: "", //存管收款费率
        },
        loading: true,
        rules: {
          depositFee: [{
            required: true,
            message: "请输入费率",
            trigger: "blur"
          }, ],
          everydayFee: [{
            required: true,
            message: "请输入费率",
            trigger: "blur"
          }, ],
          depositFundId: [{
            required: true,
            message: "请选择关联商户",
            trigger: "blur"
          }, ],
          everydayFundId: [{
            required: true,
            message: "请选择关联商户",
            trigger: "blur"
          }, ],
        },
      };
    },
    computed: {
      industryTypeText() {
        return this.applyDetail.type ?
          this.$getStatusText("industry_type", this.applyDetail.type) :
          "";
      },
    },
    created() {
      this.getDetail();
      this.getfundAccountSelect();

    },
    methods: {
      getDetail() {
        //查询支付接口信息
        console.log("this.id", this.id);
        this.loading = true;
        getPayFundAccount(this.id).then((res) => {
            console.log("查询支付接口信息", res);
            const {
              result
            } = res;
            this.payLs = result;
            this.payLs.forEach(item => {
              if (item.fundAccountSettleType == 1) {
                //日常收款帐号 
                this.formInfo.everydayFundId = item.thirdMerchantId
                this.formInfo.everydayFee = item.fee
              } else if (item.fundAccountSettleType == 2) {
                //存管帐号
                console.log('item', item)
                this.formInfo.depositFundId = item.thirdMerchantId
                this.formInfo.depositFee = item.fee
              }
            })
            this.loading = false;
          })
          .finally(() => {
            this.loading = false;
          });
      },
      getfundAccountSelect() {
        fundAccountSelect()
          .then((res) => {
            //下拉列表
            console.log("下拉列表", res);
            const {
              result
            } = res;
            this.everydayls = result.everyday;
            this.DepositoryLs = result.deposit;

          })
          .finally(() => {
            // this.loading = false;
          });
      },
      handleClose() {
        this.$emit("update:visible", false);
      },
      submitForm(formName) {
        //确认提交
        this.formInfo.merchantId = this.id;
        console.log('his.formInfo', this.formInfo)
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const params = {
              ...this.formInfo,
            };
            payFundAccount(params)
              .then((res) => {
                const {} = res.result;
                this.$message({
                  message: "修改成功",
                  type: "success",
                  duration: 1500,
                });
                this.$emit("success");
                this.$emit("update:visible", false);
              })
              .finally(() => {
                // this.loading = false;
              });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      submitYs(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const params = {
              id: this.id,
              fee: this.form.fee,
            };
            payFundFee(params)
              .then((res) => {
                const {} = res.result;
                this.$message({
                  message: "更换成功",
                  type: "success",
                  duration: 1500,
                });
                this.$emit("success");
                this.$emit("update:visible", false);
              })
              .finally(() => {
                this.loading = false;
              });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
    },
  };

</script>
<style lang="scss" scoped>
  .ex-diolog {
    ::v-deep .ex--dialog--footer {
      border: none !important;
    }

    .main {
      margin: 0 auto;
    }

    .pic-list {
      display: flex;
      // justify-content: space-around;
      flex-wrap: wrap;
      // width: 660px;
    }

    .img {
      display: block;
      width: 200px;
      height: auto;
      margin-right: 20px;
      margin-bottom: 20px;
    }

    .list_box {
      display: flex;
      justify-content: flex-start;
    }

    .img_box {
      display: flex;
      flex-direction: column;
      margin-right: 24px;
    }

    .img_box img {
      width: 140px;
      height: 90px;
    }

    .btn_box {
      width: 100%;
      display: flex;
      justify-content: center;
    }

    .list {
      ::v-deep .el-form-item {
        display: flex;
        justify-content: flex-start;
      }

      ::v-deep .el-form-item__label {
        width: 180px;
      }

      ::v-deep .el-form-item__content {
        width: 300px;
      }
    }

    .tltle {
      display: flex;
      margin: 20px 0;

      .lable {
        color: red;
      }
    }
  }

</style>
